<template>
  <div class="chat " :class="chatMsg.isSelf?'chat-end':'chat-start'">
    <div class="chat-image avatar">
      <div class="w-10 rounded-full">
        <img alt="avatar" :src="chatMsg.avatarUrl" oncontextmenu="return false"/>
      </div>
    </div>
<!-- <div class="chat-header text-sm opacity-50">
      {{ chatMsg.createTime }}
    </div> -->
    <div v-if="chatMsg.urlRef" class="chat-bubble p-1">
      <img class="rounded-xl max-w-sm max-h-80 w-auto h-auto" :src="chatMsg.content" alt="picture" oncontextmenu="return false"/>
    </div>
    <div v-else class="chat-bubble">
      {{ chatMsg.content }}
    </div>

    <div v-if="!chatMsg.isSelf && chatMsg.isGroup" class="chat-footer opacity-50">
      {{ chatMsg.sender }}
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineProps} from 'vue'
import type {ChatMessage} from "@/models/message";

//父组件传值时的定义
const props = defineProps<{
  chatMsg: ChatMessage;
}>();

</script>

<style scoped>

</style>